<template>
  <a-row :gutter="16">
    <a-col :span="4">
      <div class="song-item">
        <div class="song-item-mc">
          <img style="width:100%"
               src="@/assets/img/logo.png">
          <div class="song-item-play">
            <CaretRightOutlined />
          </div>
        </div>
        <p class="song-desc text-ov2">
          每日歌曲推荐
        </p>
      </div>
    </a-col>
    <a-col :span="4"
           v-for="(item, index) in modlueData"
           :key="index">
      <div class="song-item"
           @click="showSongList(item)">
        <div class="song-item-mc">
          <img :src="item.picUrl">
          <span class="num">
            <PlayCircleOutlined />123万
          </span>
          <div class="song-item-play">
            <CaretRightOutlined />
          </div>
        </div>
        <p class="song-desc  text-ov2">
          {{item.name}}
        </p>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { CaretRightOutlined, PlayCircleOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { findPlaylistByListId } from "@/utils/api"
export default {
  props: {
    modlueData: Array
  },
  components: {
    CaretRightOutlined,
    PlayCircleOutlined,
  },
  setup(props) {
    const router = useRouter()
    const route = useRoute()
    const showSongList = item => {
      console.log(item);
      router.push('/songSheetDetail/' + item.id || '')
    }

    return {
      showSongList
    }
  }
}
</script>

<style lang='scss' scoped >
.song-item {
  .song-item-mc {
    position: relative;
    width: 100%;
    height: 100%;
    &:hover {
      .song-item-play {
        opacity: 1;
      }
    }
    .num {
      position: absolute;
      right: 5px;
      top: 5px;
      color: #fff;
      font-size: 14px;
    }
    .song-item-play {
      cursor: pointer;
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      background-color: #fff;
      text-align: center;
      color: $paimary;
      font-size: 18px;
      opacity: 0;
      transition: all 0.5s;
    }
    img {
      border-radius: 8px;
      width: 100%;
      object-fit: cover;
    }
  }
  .song-desc {
    height: 3.5em;
  }
}
</style>